<template>
  <div class="rec-floor">
    <div class="flex header">
      <div class="floor-logo">{{ index }}F</div>
      <div class="flex-fill"></div>
      <div class="text">{{ floor.name }}</div>
    </div>
    <div class="main flex">
      <a :href="floor.left.url">
        <div
          class="left"
          :style="{ 'background-image': 'url(' + floor.left.image + ')' }"
        ></div>
      </a>
      <div class="right flex-fill flex-col">
        <div class="flex flex-fill">
          <goods-item
            :goods="floor.goods[i]"
            v-for="i in [0, 1, 2, 3]"
            :key="i"
            class="flex-fill rec-floor-item"
          ></goods-item>
        </div>
        <div class="flex flex-fill">
          <goods-item
            :goods="floor.goods[i]"
            v-for="i in [4, 5, 6, 7]"
            :key="i"
            class="flex-fill rec-floor-item"
          ></goods-item>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import GoodsItem from "@/components/shop/GoodsItem.vue";

defineProps<{
  floor: object;
  index: number;
}>();
</script>
<style lang="scss" scoped>
@import "@/assets/scss/variables.scss";
.floor-logo {
  background: url("/images/floornum.jpg") left center no-repeat;
  width: 20px;
  height: 20px;
  color: #fff;
  padding-right: 10px;
  padding-top: 5px;
  font-size: 14px;
}
.rec-floor {
  .header {
    border-bottom: 1px solid $back-color-header;
    min-height: 3em;
  }
  .text {
    border-top: 3px solid $back-color-header;
    border-left: 1px solid $back-color-header;
    border-right: 1px solid $back-color-header;
    line-height: 3em;
    padding: 0 2em;
  }
  .main {
    .left {
      background: url("/images/adjs.png") center center no-repeat;
      background-size: 100% 100%;
      width: 350px;
      height: 520px;
    }
  }
}
.rec-floor-item {
  border-bottom: 1px solid rgb(230, 230, 230);
  border-right: 1px solid rgb(230, 230, 230);
}
</style>
